import { $playRecord } from "@/api/policys/orderList";
import LPopup from "@/components/public/lPopup/lPopup";
import { message } from "ant-design-vue";
import { defineComponent, nextTick, reactive, ref } from "vue";
import styles from "./recordingPopup.module.less";
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
import pako from "pako";

export default defineComponent({
  emits: ["cancel"],
  setup(props, { emit, expose }) {
    const state = reactive({

    })
    let rrwebPlayerInstance: any = null;
    
    const open = (e: any) => {
      popupRef.value.open();
      message.loading({ content: '加载中...', key: 'loading' });
      $playRecord({ order_no: e.order_no }).then((res: any) => {
        if (res.data.length === 0) {
          message.error('无录屏数据!');
          emit("cancel");
          return;
        }
        res.data.forEach((item: any) => {
          let events = item.screen_record;
          if (!events) {
            message.error('无录屏数据!');
            emit("cancel");
            return;
          }
          events = decodeURIComponent(events);
          popupRef.value.open();
          emit("cancel");
          nextTick(() => {
            const screenRecordDiv = document.createElement('div');
            screenRecordDiv.setAttribute('id', 'screenRecord');
            document.getElementById('screenRecordBox')?.appendChild(screenRecordDiv)
            const target: any = document.getElementById('screenRecord');
            rrwebPlayerInstance = new rrwebPlayer({
              target,
              props: {
                events: JSON.parse(events)
              }
            })
          })
        })
      }).finally(() => {
        message.success({ content: '加载完成!', key: 'loading', duration: 2 });
      })
    }
    const close = () => {
      rrwebPlayerInstance?.pause?.();
      document.getElementById('screenRecord')?.remove();
    };
    const popupRef = ref(null as any)

    expose({
      open,
      close,
    });
    return () => (
      <LPopup title="订单回溯" width="600px" ref={popupRef}
        onBeforeClose={() => {
          close();
        }}
      >
        {
          <div class={styles.screenRecord} id="screenRecordBox"></div>
        }
      </LPopup>
    )
  }
})